/**
 * Created by bgy on 2016/12/5.
 * 申请质检
 */
import React from 'react';
import {Link, hashHistory} from 'react-router';

//import HeaderTitle from '../../components/common/HeaderTitle';
//import FruitSelection from '../../components/common/FruitSelection';
import AttachmentMgt from '../../common/AttachmentMgtNew';
class AppFQIComponent extends React.Component {
    constructor() {
        super();
        let qcApply = {
            fruitName: '',
            area: '',
            scale: '',
            yield: ''

        }
        let qcApplyObj = JSON.parse(window.localStorage.getItem('qcApply'));
        if (qcApplyObj) {
            qcApply = qcApplyObj;
        }
        this.state = {
            showMain: true,
            phoneDisabled: '',
            loadDisabled: '',
            loginBtn: 'disabled',
            codeInput: '',
            gysType: '',
            picUploadParam: [
                {
                    "appKey": "b2b",
                    "ownType": "qcApply",
                    "ownCode": "1",//质检申请记录单据号
                    "fileUseCode": "orchardPicture",
                    "fmFiles": []
                }, {
                    "appKey": "b2b",
                    "ownType": "qcApply",
                    "ownCode": "1",//质检申请记录单据号
                    "fileUseCode": "productionPicture",
                    "fmFiles": []
                }, {
                    "appKey": "b2b",
                    "ownType": "qcApply",
                    "ownCode": "1",//质检申请记录单据号
                    "fileUseCode": "packagePicture",
                    "fmFiles": []
                }, {
                    "appKey": "b2b",
                    "ownType": "qcApply",
                    "ownCode": "1",//质检申请记录单据号
                    "fileUseCode": "goodPicture",
                    "fmFiles": []
                }
            ],
            qcApply: qcApply
        };
    }

    onChildChanged(code, res) {
        let picUploadParam = this.state.picUploadParam;
        for (let i = 0; i < picUploadParam.length; i++) {
            if (picUploadParam[i].fileUseCode == code) {
                picUploadParam[i].fmFiles = res;
                break;
            }
        }
        this.state.picUploadParam = picUploadParam;
    }

    handlerClick() {
        let picUploadParam = this.state.picUploadParam;
        let QcApplay = {};
        QcApplay.area = this.refs.area.value;
        QcApplay.scale = this.refs.scale.value;
        QcApplay.scaleText = this.refs.scaleText.value;
        QcApplay.yield = this.refs.yield.value;
        QcApplay.yieldText = this.refs.yieldText.value;
        QcApplay.area = this.refs.area.value;
        window.localStorage.setItem('qcApply', JSON.stringify(QcApplay));
        window.localStorage.setItem('picUploadParam', JSON.stringify(picUploadParam));
        const path = 'selectQTWay';
       hashHistory.push(path);

    }

    setSelectValue(refcode, value, event) {
        var selected = event.target;
        this.refs[refcode + 'Text'].value = selected.innerHTML;
        this.refs[refcode].value = value;
        event.target.parentNode.parentNode.classList.add('hidden');
    }

    showDropDownDiv(event) {
        let input = event.target;
        input.parentNode.parentNode.nextSibling.classList.remove('hidden');
    }
  selFruit(){
    window.location.href='FruitSelectionPage';
  }
    render() {
        return (
            <article>
                <article className={this.state.showMain?'quality-box':'quality-box sink'}>
                    <section className='item-list'>
                        <div style={{backgroundColor:'#f0f0f0'}}>
                            <div className='edit-form rel'>
                                <div className='edit-item'>
                                    <label>
                                      <span className="label-lt">水果名称</span>
                                        <span className="label-rt">
                                          <input  style={{'width':'80%','border':'none','padding':'0'}} type="text" placeholder='请选择'/>
                                          <img className="pull-down-pic" src="../images/u353.png"/>
                                        </span>
                                    </label>
                                </div>
                                <div className='edit-item'>
                                    <label>
                                        <span className="label-lt">地域</span>
                                        <span className="label-rt">
                                          <input type="hidden" defaultValue={this.state.qcApply.area} ref="area"/><input type="text" className='input-item' defaultValue={this.state.qcApply.areaText} ref='areaText' placeholder="请输入产地"/>
                                        </span>
                                    </label>
                                </div>
                                <div className=''>
                                    <label className='edit-item'>
                                        <span className="label-lt">规模</span>
                                        <span className="label-rt">
                                          <input type="hidden" ref="scale" defaultValue={this.state.qcApply.scale}/>
                                          <input  style={{'width':'80%','border':'none','padding':'0'}} type="text" defaultValue={this.state.qcApply.scaleText} ref='scaleText' placeholder="请输入规模"/>
                                         <img onClick={this.showDropDownDiv} className="pull-down-pic" src="images/u353.png"/>
                                        </span>
                                    </label>
                                    <div className="form-pop-box hidden">
                                        <div>
                                            <div className="" onClick={this.setSelectValue.bind(this,'scale','A')}>10亩以下</div>
                                            <div className="" onClick={this.setSelectValue.bind(this,'scale','B')} >10亩~20亩</div>
                                            <div className="" onClick={this.setSelectValue.bind(this,'scale','C')}>20亩以上</div>
                                        </div>
                                    </div>
                                </div>
                                <div className=''>
                                    <label className='edit-item'>
                                        <span className="label-lt">产量</span>
                                        <span className="label-rt">
                                                <input type="hidden" ref="yield"/>
                                                <input  style={{'width':'80%','border':'none','padding':'0'}} defaultValue={this.state.qcApply.yieldText} type="text" ref='yieldText' placeholder="请输入产量"/>
                                                 <img onClick={this.showDropDownDiv} className="pull-down-pic" src="images/u353.png"/>
                                        </span>
                                    </label>
                                  <div className="form-pop-box hidden">
                                    <div>
                                      <div className="" onClick={this.setSelectValue.bind(this,'yield','A')}>10T</div>
                                      <div className="" onClick={this.setSelectValue.bind(this,'yield','B')} >10~20T</div>
                                      <div className="" onClick={this.setSelectValue.bind(this,'yield','C')}>20T以上</div>
                                    </div>
                                  </div>
                                </div>
                             </div>
                            <div className='edit-form rel'>
                                    <div className="quality-pic-box">
                                        <div className='quality-pic-title'>图片介绍</div>
                                        <div className="pic-item pic">
                                            <label htmlFor="">果园图片</label>
                                            <AttachmentMgt addButtonSrc='images/uploadPic.png' allowMultiple={true}
                                                           callbackParent={this.onChildChanged.bind(this,'orchardPicture')}></AttachmentMgt>
                                        </div>
                                        <div className="pic-item pic">
                                            <label htmlFor="">生产线图片</label>
                                            <AttachmentMgt addButtonSrc='images/uploadPic.png' allowMultiple={true}
                                                           callbackParent={this.onChildChanged.bind(this,'productionPicture')}></AttachmentMgt>
                                        </div>
                                        <div className="pic-item pic">
                                            <label htmlFor="">包装图片</label>
                                            <AttachmentMgt addButtonSrc='images/uploadPic.png' allowMultiple={true}
                                                           callbackParent={this.onChildChanged.bind(this,'packagePicture')}></AttachmentMgt>
                                        </div>
                                        <div className="pic-item pic last">
                                            <label htmlFor="">产品图片</label>
                                            <AttachmentMgt addButtonSrc='images/uploadPic.png' allowMultiple={true}
                                                           callbackParent={this.onChildChanged.bind(this,'goodPicture')}></AttachmentMgt>
                                        </div>
                                    </div>
                            </div>
                          <button className="button button-pill button-primary btn-green btn-long" onClick={this.handlerClick.bind(this)} ref="loginBtn">下一步</button>
                        </div>
                    </section>
                </article>


            </article>
        )
    }
}
export default AppFQIComponent;
